<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'
	import infomask from './component/infomask.vue'
	import { useUsercodeStore } from '@/store/usercode.js'

	const userCodeStore = useUsercodeStore()

	const blindboxId = ref()
	const blindboxDetail = ref()
	const caseId = ref(0)
	// 优惠券id
	const couponId = ref(0)
	const couponname = ref('')
	const couponType = ref(-1)

	const probality = ref('')
	//tab数据
	const items = ref(['奖池预览', '开赏记录'])
	const current = ref(0)
	// 盲盒详情
	const isReservation = ref(0)
	async function getblindboxDetail() {
		const res = await http.request({
			url: '/api/box/boxDetails',
			method: 'POST',
			data: {
				id: blindboxId.value,
				case_id: caseId.value,
			},
		})
		console.log(res)
		blindboxDetail.value = res.data
		caseId.value = res.data.case_info.id
		const keys = ref([])
		blindboxDetail.value.box.probability_show.forEach((item) => {
			keys.value.push(`${Object.keys(item)}:${item[Object.keys(item)]}%`)
		})
		probality.value = keys.value.join('  ')
		if (res.data.box.is_cc == 1) {
			items.value = ['奖池预览', '开赏记录', '冲冲赏']
		}
		isReservation.value = res.data.is_subscription
	}

	//去我的奖品
	function toMyReward() {
		uni.switchTab({
			url: '/pages/bag/index',
		})
	}
	// 开赏记录
	const prizePage = ref(1)
	const openRewardList = ref([])
	const prizeFlag = ref(true)
	async function openReward() {
		if (
			blindboxDetail.value.case_info.leftover ==
			blindboxDetail.value.case_info.sum
		) {
			return
		}
		ccRewardList.value = []
		if (prizeFlag.value) {
			const res = await http.request({
				url: '/api/box/winLog_heaven',
				method: 'POST',
				data: {
					page: prizePage.value,
					limit: 10,
					id: blindboxId.value,
					case_id: caseId.value,
				},
			})
			if (res.data.length == 0) {
				uni.utils.toast('已经没有记录了~')
				prizeFlag.value = false
				--prizePage.value
				return
			}
			console.log(res.data)
			openRewardList.value = [...openRewardList.value, ...res.data]
		} else {
			// uni.utils.toast('已经没有记录了~')
			return
		}
	}

	function prizeLower() {
		++prizePage.value
		openReward()
	}
	// 冲冲赏排行榜
	const ccRewardList = ref([])
	const ccPage = ref(1)
	const ccFlag = ref(true)
	async function ccReward() {
		if (
			blindboxDetail.value.case_info.leftover ==
			blindboxDetail.value.case_info.sum
		) {
			return
		}
		openRewardList.value = []
		if (ccFlag.value) {
			const res = await http.request({
				url: '/api/box/ccRanking',
				method: 'POST',
				data: {
					page: ccPage.value,
					limit: 10,
					id: blindboxId.value,
					case_id: caseId.value,
				},
			})
			console.log(res)
			if (res.data.length == 0) {
				uni.utils.toast('已经没有记录了~')
				ccFlag.value = false
				--ccPage.value
				return
			}
			ccRewardList.value = [...ccRewardList.value, ...res.data]
		} else {
			// uni.utils.toast('已经没有记录了~')
			return
		}
	}

	function chongchongLower() {
		++ccPage.value
		ccReward()
	}

	// 上一箱下一箱
	function prevent() {
		current.value = 0
		const boxindex = ref(0)
		console.log(blindboxDetail.value.case_info.id)
		boxchangeList.value.forEach(async (item, index) => {
			if (blindboxDetail.value.case_info.id == item.id) {
				if (index == 0) {
					if (choosenow.value == 1) {
						uni.utils.toast('已经是第一个了~')
						return
					} else {
						--choosenow.value
						await getboxList()
						let chage = JSON.parse(
							JSON.stringify(boxchangeList.value)
						)
						caseId.value = chage[chage.length - 1].id
						getblindboxDetail()
					}
				} else {
					if (index != 0) {
						boxindex.value = --index
					} else {
						boxindex.value = 0
					}
					caseId.value = JSON.parse(
						JSON.stringify(boxchangeList.value)
					)[boxindex.value].id
					getblindboxDetail()
				}
			}
		})
	}

	function next() {
		current.value = 0
		const boxindex = ref(0)
		if (JSON.parse(JSON.stringify(boxchangeList.value)).length == 0) {
			uni.utils.toast('已经是最后一个了~')
		}
		boxchangeList.value.forEach(async (item, index) => {
			if (blindboxDetail.value.case_info.id == item.id) {
				if (
					index ==
					JSON.parse(JSON.stringify(boxchangeList.value)).length - 1
				) {
					++choosenow.value
					await getboxList()
					console.log(boxchangeList.value.length)
					if (boxchangeList.value.length == 0) {
						uni.utils.toast('已经是最后一个了~')
						--choosenow.value
						return
					} else {
						boxindex.value = 0
						caseId.value = JSON.parse(
							JSON.stringify(boxchangeList.value)
						)[boxindex.value].id
						getblindboxDetail()
					}
				} else {
					boxindex.value = ++index
					caseId.value = JSON.parse(
						JSON.stringify(boxchangeList.value)
					)[boxindex.value].id
					getblindboxDetail()
				}
			}
		})
	}

	function onClickItem(e) {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex
		}
		if (e.currentIndex == 1) {
			prizePage.value = 1
			prizeFlag.value = true
			openRewardList.value = []
			openReward()
		} else if (e.currentIndex == 2) {
			ccPage.value = 1
			ccFlag.value = true
			ccRewardList.value = []
			ccReward()
		} else {
			openRewardList.value = []
			ccRewardList.value = []
		}
		console.log(e.currentIndex)
	}

	// 查看奖品详情
	const showmask = ref(false)
	const maskindex = ref(0)
	function goodsinfo(index) {
		showmask.value = true
		maskindex.value = index
	}
	// 关闭mask
	function closeMask() {
		showmask.value = false
	}

	// 换箱
	const boxpopup = ref()
	const boxchangeList = ref([])
	const totalBoxPage = ref(1)
	async function getboxList() {
		const res = await http.request({
			url: '/api/box/getCase',
			method: 'POST',
			data: {
				page: choosenow.value,
				limit: 20,
				id: blindboxId.value,
			},
		})
		console.log(res)
		boxchangeList.value = res.data
		totalBoxPage.value = res.maxPage
	}
	const choosenow = ref(1)
	async function changebox() {
		await getboxList()
		boxpopup.value.open('bottom')
	}
	function closepop() {
		boxpopup.value.close()
	}
	function switchbox(index) {
		choosenow.value = index
		getboxList()
	}
	// 选择箱子
	function changeTheBox(id) {
		current.value = 0
		caseId.value = id
		ccRewardList.value = []
		openRewardList.value = []
		getblindboxDetail()
		boxpopup.value.close()
	}
	
	//预约
	async function reservationTX() {
		if (isReservation.value == 1) {
			return
		}
		const res = await http.request({
			url: '/api/box/ysPost',
			method: 'POST',
			data: {
				id: blindboxId.value,
			},
		})
		console.log(res);
		if (res.st == 1) {
			isReservation.value = 1
			uni.utils.toast('订阅成功')
		} else {
			uni.utils.toast('订阅失败')
		}
	}

	// 规则
	const rulepopup = ref()
	function rulePOP() {
		rulepopup.value.open('bottom')
	}

	onLoad((option) => {
		blindboxId.value = option.id
	})
	
	onShow(() => {
		current.value = 0
		getblindboxDetail()
		getboxList()
		uni.$once('thecoupon', (data) => {
			console.log(data)
			realmoney.value = paymoney.value
			if (data.coupon) {
				couponId.value = data.coupon.id
				couponname.value = data.coupon.title
				// 满减
				if (data.coupon.type == 1) {
					realmoney.value = paymoney.value - data.coupon.money
				} else if (data.coupon.type == 2) {
					realmoney.value = paymoney.value - data.coupon.money
				} else if (data.coupon.type == 3) {
					realmoney.value = paymoney.value * data.coupon.discount
				}
			}
		})
	})
</script>

<template>
	<view class="tx-content">
		<view class="top">
			<view class="rules" @click="rulePOP"> 规则 </view>
			<view class="my-reward" @click="toMyReward"> </view>
			<view class="title">
				<text style="margin-right: 20rpx">{{
					'第' +
					blindboxDetail.case_info.name +
					'/' +
					blindboxDetail.box.case_num +
					'箱'
				}}</text>
				<text>赏池剩余：</text>
				<text style="color: #ece74c">{{
					blindboxDetail.case_info.leftover +
					'/' +
					blindboxDetail.case_info.sum
				}}</text>
			</view>
			<view class="top-content">
				<view class="left">
					<image
						style="width: 212rpx; height: 212rpx"
						:src="blindboxDetail.box.img"
						mode=""
					></image>
				</view>
				<view class="right">
					<view class="right-top">
						{{ blindboxDetail.box.name }}
					</view>
					<view class="right-bottom">
						<view class="bottom-left">
							<text>￥</text>
							<text>{{ blindboxDetail.box.price + '/抽' }}</text>
						</view>
						<view class="bottom-right" @click="changebox"> </view>
					</view>
				</view>
			</view>
		</view>
		<view class="choose">
			<view class="left" @click="prevent"> 上一箱 </view>
			<view class="center">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control
						:current="current"
						:values="items"
						style-type="text"
						active-color="#9E77F6"
						@clickItem="onClickItem"
					/>
				</view>
				<view class="content">
					<view v-if="current === 0">
						<view class="content-text">
							<uni-notice-bar
								v-if="probality.length > 6"
								:speed="35"
								color="#CBCBF8"
								background-color="#130D34"
								scrollable
								:text="probality"
							/>
							<view class="probality-bar" v-else>
								{{ probality }}
							</view>
							<scroll-view
								scroll-y="true"
								class="scroll-Y"
								style="height: 57vh"
							>
								<view class="goods-list">
									<view
										class="list-item"
										v-for="(
											item, index
										) in blindboxDetail.goods_info"
										:key="item.goods_name + index"
										@click="goodsinfo(index)"
									>
										<view class="list-item-img">
											<image
												style="
													position: absolute;
													top: 0;
													left: 0;
													height: 40rpx;
												"
												:src="item.rule_img"
												mode="heightFix"
											></image>
											<text
												style="
													position: absolute;
													top: 8rpx;
													right: 12rpx;
													font-size: 18rpx;
												"
												>{{
													item.leftover +
													'/' +
													item.num
												}}</text
											>
											<image
												style="
													width: 164rpx;
													height: 164rpx;
												"
												:src="item.img"
												mode=""
											></image>
											<view
												v-if="
													item.leftover == 0 &&
													item.rule_id != 6 &&
													item.rule_id != 5 &&
													item.rule_id != 7
												"
												class="sale-out"
												style=""
											>
												售罄
											</view>
											<view
												v-if="
													(item.rule_id == 6 ||
														item.rule_id == 5 ||
														item.rule_id == 7) &&
													item.leftover == 0
												"
												class="sale-out"
												style=""
											>
												已开奖
											</view>
											<view
												class="scroll"
												v-if="
													item.stage_start != 0 &&
													item.stage_end != 0
												"
											>
												<uni-notice-bar
													:speed="10"
													color="#CBCBF8"
													background-color="rgba(19, 13, 52, .5)"
													scrollable
													:text="`${item.stage_start}-${item.stage_end}发内随机送出`"
												/>
											</view>
										</view>
										<view
											class="list-item-img-name"
											style="
												width: 164rpx;
												margin-top: 12rpx;
												font-size: 17rpx;
												text-align: center;
											"
											>{{ item.goods_name }}</view
										>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<view v-if="current === 1">
						<view class="content-text">
							<scroll-view
								scroll-y="true"
								class="scroll-Y"
								style="height: 47vh"
								@scrolltolower="prizeLower"
							>
								<view class="prize-list">
									<view
										class="prize-item"
										v-for="item in openRewardList"
										:key="'openreward' + item.id"
									>
										<view class="head">
											<image
												style="
													width: 84rpx;
													height: 84rpx;
													flex-shrink: 0;
												"
												:src="item.himg"
												mode=""
											></image>
										</view>
										<view class="prize-info">
											<view class="text">
												<view style="font-size: 24rpx">
													{{
														item.nickname.substring(
															0,
															5
														) + '**'
													}}
												</view>
												<view
													style="
														font-size: 20rpx;
														color: #8e8d8d;
													"
												>
													{{
														parseTime(item.add_time)
													}}
												</view>
											</view>
											<view class="prize-right">
												<view style="text-align: right">
													{{ item.rule_name }}
												</view>
												<view
													class="prize-name"
													style="text-align: right"
												>
													{{ item.goods_name }}
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<view v-if="current === 2">
						<view class="content-text">
							<scroll-view
								scroll-y="true"
								class="scroll-Y"
								style="height: 47vh"
								@scrolltolower="chongchongLower"
							>
								<view class="chongchong-list">
									<view
										class="chongchong-item"
										v-for="(item, index) in ccRewardList"
										:key="cc + item.user_id"
									>
										<view class="index">
											{{ index + 1 }}</view
										>
										<view class="avatar">
											<image
												style="
													width: 76rpx;
													height: 76rpx;
												"
												:src="item.himg"
												mode=""
											></image>
										</view>
										<view class="name">
											<text>{{
												item.nickname.substring(0, 2) +
												'****'
											}}</text>
											<text>{{
												item.buy_num + '发'
											}}</text>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
			<view class="right" @click="next"> 下一箱 </view>
		</view>

		<view class="tx-bottom">
			<view
				class="reservation"
				:class="{
					'reservation-bg': isReservation == 0,
					'reservation-bg-ok': isReservation == 1,
				}"
				@click="reservationTX"
			>
			</view>
			<view class="abandon">
				开售时间：{{ parseTime(blindboxDetail.box.ys_time) }}
			</view>
		</view>
		<infomask
			v-if="showmask"
			@close-mask="closeMask"
			:maskindex="maskindex"
			:thegoods="blindboxDetail.goods_info"
			:boxId="blindboxDetail.box.id"
		></infomask>

		<!-- 换箱弹出层 -->
		<uni-popup ref="boxpopup" type="bottom">
			<view class="buypopup-content">
				<view class="pop-top"> 选择箱子 </view>
				<view class="pop-info">
					{{
						'当前第' +
						blindboxDetail.case_info.name +
						'/' +
						blindboxDetail.box.case_num +
						'箱'
					}}
				</view>
				<view class="choose-box">
					<scroll-view
						class="scroll-view"
						scroll-x="true"
						scroll-left="900"
					>
						<view
							v-for="item in totalBoxPage"
							:key="'totalboxpage' + item"
							:id="item"
							class="choose-item"
							:class="{ 'choose-item-active': choosenow == item }"
							@click="switchbox(item)"
							>{{ `${item * 20 - 19}-${item * 20}箱` }}</view
						>
					</scroll-view>
				</view>

				<scroll-view
					scroll-y="true"
					class="scroll-Y"
					style="height: 55vh"
				>
					<view class="box-list">
						<view
							@click="changeTheBox(item.id)"
							class="box-list-item"
							v-for="(item, index) in boxchangeList"
							:key="'boxchangelist' + item.id"
						>
							<view class="list-mask" v-if="item.leftover == 0">
								已售罄
							</view>
							<view class="box-list-item-left">
								<view class="box-index">
									{{ `第${index + choosenow * 20 - 19}箱` }}
								</view>
								<view class="sy-num">
									{{ `剩${item.leftover}张` }}
								</view>
							</view>
							<scroll-view
								scroll-y="true"
								class="scroll-Y"
								style="height: 80%"
							>
								<view class="box-list-item-right">
									<view
										class="right-item"
										v-for="level in item.goods_info"
										:key="'level' + level.rule_id"
									>
										<image
											class="word"
											:src="level.rule_img"
											mode="heightFix"
										></image>
										<text class="number">{{
											`${level.sum_leftover}/${level.sum_num}`
										}}</text>
									</view>
								</view>
							</scroll-view>
							<view class="participate" v-if="item.is_cy == 1">
								已参与
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="pop-close" @click="closepop"></view>
			</view>
		</uni-popup>
		<!-- 规则弹出层 -->
		<uni-popup ref="rulepopup" type="bottom">
			<view class="rulepopup-content"> 规则 </view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.container {
		/* #ifndef APP-NVUE */
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		/* #endif */
	}

	.tx-content {
		height: 100vh;
		padding-top: 32rpx;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #1a133f;
		color: white;

		.top {
			position: relative;
			height: 402rpx;
			background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/tx-top-contant.png')
				no-repeat;
			background-size: 100%;
			.rules {
				position: absolute;
				top: 12rpx;
				left: 56rpx;
				width: 63rpx;
				height: 31rpx;
				background-color: #282968;
				border-radius: 6rpx;
				font-size: 22rpx;
				line-height: 31rpx;
				text-align: center;
			}
			.my-reward {
				position: absolute;
				top: -32rpx;
				right: 18rpx;
				width: 133rpx;
				height: 133rpx;
				background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/my-gift.png')
					no-repeat;
				background-size: contain;
			}
			.title {
				width: 100%;
				padding-top: 34rpx;
				box-sizing: border-box;
				text-align: center;
				font-size: 26rpx;
			}

			.top-content {
				display: flex;
				align-items: center;
				margin: 56rpx 0 0 61rpx;

				.left {
					width: 212rpx;
					height: 212rpx;
					border-radius: 15rpx;
					overflow: hidden;
					margin-right: 35rpx;
					border: 1px solid $all-color;
				}

				.right {
					width: 60%;
					height: 204rpx;
					padding-right: 10rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.right-top {
						font-size: 40rpx;
						font-weight: 800;
						font-style: italic;
						text-shadow: 2px 2px 2px $all-color;
					}

					.right-bottom {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.bottom-left {
							text-shadow: 2px 2px 2px $all-color;
						}

						.bottom-right {
							position: relative;
							top: 14rpx;
							width: 164rpx;
							height: 52rpx;
							background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/change.png')
								no-repeat;
							background-size: 100%;
						}
					}
				}
			}
		}

		.choose {
			position: relative;
			width: 100%;
			display: flex;
			margin-top: 29rpx;

			.left {
				position: absolute;
				top: 0;
				left: 0;
				width: 155rpx;
				height: 66rpx;
				padding-left: 22rpx;
				box-sizing: border-box;
				background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/next_page.png')
					no-repeat;
				background-size: 100%;
				font-size: 30rpx;
				line-height: 66rpx;
			}

			.center {
				width: 100%;

				::v-deep .uni-padding-wrap {
					width: 100%;
					padding: 0 155rpx;
					box-sizing: border-box;

					.segmented-control__item {
						justify-content: space-between !important;
					}

					.segmented-control__text {
						width: 100%;
						font-size: 28rpx !important;
						color: white !important;
					}
				}
			}

			.right {
				position: absolute;
				top: 0;
				right: 0;
				width: 155rpx;
				height: 66rpx;
				padding-right: 22rpx;
				box-sizing: border-box;
				background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/previous_page.png')
					no-repeat;
				background-size: 100%;
				font-size: 30rpx;
				text-align: right;
				line-height: 66rpx;
			}

			.content {
				::v-deep .uni-noticebar {
					height: 46rpx;
					margin-top: 18rpx;

					.uni-noticebar__content-text {
						font-size: 24rpx;
					}
				}

				.content-text {
					.probality-bar {
						height: 46rpx;
						margin-top: 18rpx;
						background-color: rgba(19, 13, 52, 1);
						font-size: 24rpx;
					}
				}

				.goods-list {
					// height: 57vh;
					display: flex;
					justify-content: space-evenly;
					flex-wrap: wrap;
					padding: 0 14rpx;
					// overflow: auto;

					.list-item {
						margin-top: 19rpx;
						// margin-right: 6rpx;
						// margin-right: 8rpx;
						&:nth-child(4n) {
							margin-right: 0;
						}
						.list-item-img {
							position: relative;
							width: 177rpx;
							height: 177rpx;
							padding: 8rpx;
							margin-bottom: 15rpx;
							box-sizing: border-box;
							background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/goodslist.png')
								no-repeat;
							background-size: contain;

							&:nth-child(4n) {
								margin-right: 0 !important;
							}
							.sale-out {
								position: absolute;
								top: 0;
								left: 0;
								width: 177rpx;
								height: 177rpx;
								background-color: rgba(26, 19, 63, 0.8);
								line-height: 177rpx;
								text-align: center;
							}
							.scroll {
								position: absolute;
								left: 0;
								bottom: -18rpx;
								width: 100%;
								::v-deep .uni-noticebar {
									height: 32rpx;
									.uni-noticebar__content-text {
										font-size: 18rpx;
									}
								}
							}
						}
						.list-item-img-name {
							display: -webkit-box;
							-webkit-line-clamp: 2; /* 限制为两行 */
							-webkit-box-orient: vertical;
							overflow: hidden; /* 隐藏超出部分 */
							text-overflow: ellipsis; /* 超出部分用省略号表示 */
							white-space: normal; /* 允许换行 */
							/* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
						}

						&:last-child {
							margin-bottom: 242rpx !important;
						}
					}
				}

				.prize-list {
					// height: 61vh;
					padding-top: 22rpx;
					// overflow: auto;

					.prize-item {
						display: flex;
						align-items: center;
						padding: 13rpx 30rpx;
						box-sizing: border-box;

						&:last-child {
							margin-bottom: 242rpx;
						}

						.head {
							width: 84rpx;
							height: 84rpx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 25rpx;
							box-sizing: border-box;
						}

						.prize-info {
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 84%;

							.text {
								height: 84rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
							}

							.prize-right {
								height: 84rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								font-size: 26rpx;
								.prize-name {
									width: 260rpx;

									display: -webkit-box;
									-webkit-line-clamp: 1; /* 限制为一行 */
									-webkit-box-orient: vertical;
									overflow: hidden; /* 隐藏超出部分 */
									text-overflow: ellipsis; /* 超出部分用省略号表示 */
									white-space: normal; /* 允许换行 */
									/* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
								}
							}
						}
					}
				}

				.chongchong-list {
					// height: 61vh;
					// overflow: auto;
					padding-top: 10rpx;

					.chongchong-item {
						display: flex;
						align-items: center;
						height: 92rpx;
						border-radius: 6rpx;
						margin: 10rpx 30rpx;
						padding: 0 18rpx 0 35rpx;
						box-sizing: border-box;

						&:first-child {
							background: linear-gradient(0deg, #d538ec, #e06df0);

							.index {
								font-size: 30rpx;
							}
						}

						&:nth-child(2) {
							background: linear-gradient(0deg, #3b6bda, #36adea);
							.index {
								font-size: 30rpx;
							}
						}

						&:nth-child(3) {
							background: linear-gradient(0deg, #9e77f6, #7341e5);
							.index {
								font-size: 30rpx;
							}
						}
						&:last-child {
							margin-bottom: 242rpx;
						}

						.index {
							margin-right: 24rpx;
							font-style: italic;
							font-size: 25rpx;
						}

						.avatar {
							width: 76rpx;
							height: 76rpx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 103rpx;
							flex-shrink: 0;

							image {
								flex-shrink: 0;
							}
						}

						.name {
							width: 100%;
							display: flex;
							justify-content: space-between;
							font-size: 26rpx;
						}
					}
				}
			}
		}

		.tx-bottom {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			z-index: 99;
			height: 242rpx;
			width: 100%;
			background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/bottom.png')
				no-repeat;
			background-size: 100%;

			.reservation {
				width: 700rpx;
				height: 120rpx;
			}

			.reservation-bg {
				background: url('https://ojqn.wm2177.com/wechat_imgs/is-presale.png')
					no-repeat;
				background-size: 100%;
			}
			.reservation-bg-ok {
				background: url('https://ojqn.wm2177.com/wechat_imgs/have-presale.png')
					no-repeat;
				background-size: 100%;
			}

			.abandon {
				width: 100%;
				margin-top: 4rpx;
				text-align: center;
				font-size: 22rpx;
				color: #cbcbf8;
			}
		}
		.buypopup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			height: 1170rpx;
			padding: 32rpx;
			background-color: #1a133f;
			box-sizing: border-box;
			.pop-top {
				font-style: italic;
				text-shadow: 2px 2px 2px $all-color;
				font-size: 45rpx;
				text-align: center;
			}
			.pop-info {
				margin-top: 22rpx;
				font-size: 24rpx;
			}
			.choose-box {
				height: 62rpx;
				width: 100%;
				margin-top: 48rpx;
				margin-bottom: 32rpx;
				.scroll-view {
					height: 100%;
					white-space: nowrap;
					.choose-item {
						display: inline-block;
						width: 168rpx;
						height: 100%;
						background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/odds-second.png')
							no-repeat;
						background-size: 100%;
						flex-shrink: 0;
						font-size: 25rpx;
						text-align: center;
						line-height: 62rpx;
					}
					.choose-item-active {
						background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/odds-first.png')
							no-repeat !important;
						background-size: contain !important;
					}
				}
			}
			.box-list {
				width: 100%;
				.box-list-item {
					position: relative;
					position: relative;
					display: flex;
					align-items: center;
					width: 100%;
					height: 225rpx;
					border: 1px solid rgba(255, 255, 255, 0.24);
					padding-left: 6rpx;
					margin: 34rpx 0;
					box-sizing: border-box;
					.participate {
						position: absolute;
						top: 0;
						left: 0;
						width: 110rpx;
						height: 44rpx;
						background-color: #ffb400;
						border-radius: 0 22rpx 22rpx 0;
						font-size: 24rpx;
						line-height: 44rpx;
						text-align: center;
					}
					.list-mask {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						width: 100%;
						height: 100%;
						background-color: rgba(26, 19, 63, 0.8);
						// z-index: 99;
						line-height: 225rpx;
						text-align: center;
					}
					.box-list-item-left {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 205rpx;
						height: 177rpx;
						margin-right: 20rpx;
						background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/list-back.png')
							no-repeat;
						background-size: 100%;
						flex-shrink: 0;
						font-size: 20rpx;
						text-align: center;
						.box-index {
							width: 148rpx;
							height: 52rpx;
							margin: 60rpx 0 11rpx 12rpx;
							background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/box-index.png')
								no-repeat;
							background-size: contain;
							font-size: 26rpx;
							line-height: 52rpx;
						}
					}
					.box-list-item-right {
						height: 100%;
						display: flex;
						flex-wrap: wrap;
						// height: 100%;
						// overflow: auto;
						align-items: center;
						.right-item {
							display: flex;
							align-items: flex-end;
							margin-right: 30rpx;
							margin-bottom: 28rpx;
							&:nth-child(4n) {
								margin-right: 0;
							}
							.word {
								display: inline-block;
								// width: 38rpx;
								height: 38rpx;
								margin-right: 17rpx;
								text-align: center;
								font-size: 49rpx;
							}
							.number {
								font-size: 22rpx;
							}
						}
					}
				}
			}
			.pop-close {
				position: absolute;
				top: 32rpx;
				right: 32rpx;
				width: 63rpx;
				height: 57rpx;
				background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/close.png')
					no-repeat;
				background-size: 100%;
			}
		}
		.rulepopup-content {
			height: 1117rpx;
			background-color: #fff;
			color: black;
		}
		.paypopup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 771rpx;
			padding: 63rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(26, 19, 63, 0.9);
			color: #e1e1e1;
			.top-boxinfo {
				width: 100%;
				display: flex;
				align-items: center;
				flex-shrink: 0;
				.boxinfo-left {
					width: 184rpx;
					height: 184rpx;
					border-radius: 6rpx;
					overflow: hidden;
					margin-right: 12rpx;
				}
				.boxinfo-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 180rpx;
				}
			}
			.choose-coupon {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 47rpx;
				flex-shrink: 0;
			}
			.pays {
				width: 100%;
				.pays-title {
					margin: 24rpx 0 13rpx 0;
					font-size: 24rpx;
				}
				.radio-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 13rpx 0;

					border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
					&:last-child {
						border: none;
					}
					.radio-item-left {
						display: flex;
						align-items: center;
					}
				}
			}
			.paybutton {
				width: 100%;
				height: 109rpx;
				margin-top: 32rpx;
				background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/paybutton.png')
					no-repeat;
				background-size: contain;
				font-weight: 800;
				font-size: 38rpx;
				color: #9146a0;
				line-height: 96rpx;
				text-align: center;
				// text-stroke: 1rpx #FFFFFF;
				// -webkit-text-stroke: 1rpx #FFFFFF;
			}
			.pays-agree {
				width: 100%;
				margin-top: 29rpx;
				font-size: 20rpx;
				color: #e1e1e1;
				text-align: center;
			}
		}
	}
</style>
